<template>
	<view class="item">
		<view class="img">
			<image class="myimg" :src="movie.images.large" mode="scaleToFill"></image>
		</view>
		<view class="list">
			<view>电影名：{{movie.title}}</view>
			<view>主演：{{movie.casts.map(item=>item.name).join(",")}}</view>
		    <view>导演：{{movie.directors.map(item=>item.name).join(",")}}</view>
			<view>年份：{{movie.year}}</view>
		</view>
		<view class="raining">
			{{movie.rating.average}}
		</view>
	</view>
</template>

<script>
	export default {
		props:['movie']
		
	}
</script>

<style scoped lang="scss">
	.item {
		display: flex;
		height: 200px;
		border-bottom:1px solid #ccc ;
		.img {
		   height: 200px;
		   width: 116px;
		   display: flex;
		   align-items: center;
		   justify-content: center;
		   .myimg {
			   width: 110px;
			   height: 185px;
		   }
		}
		.list {
			padding: 15px 10px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.raining {
			font-size: 50px;
			color: red;
			font-weight: 700;
		}
	}
</style>